<script setup>
import { ref, shallowRef } from "vue";
import CustList from "./list.vue";

const tabName = [
  { name: "推荐" },
  { name: "手机" },
  { name: "女装" },
  { name: "男鞋" },
  { name: "女鞋" },
  { name: "男装" },
  { name: "玩具乐器" },
  { name: "工业品" },
  { name: "运动" },
  { name: "电脑办公" },
  { name: "美妆" },
  { name: "酒水饮料" },
  { name: "数码" },
  { name: "奢侈品" },
  { name: "食品" },
  { name: "家电" },
  { name: "宠物" },
  { name: "厨具" },
  { name: "图书" },
  { name: "个护清洁" },
  { name: "腕表珠宝" },
  { name: "家具日用" },
];
const keyword = ref("笔记本固态硬盘");
const swiper = ref([
  "https://cdn.uviewui.com/uview/swiper/swiper1.png",
  "https://cdn.uviewui.com/uview/swiper/swiper2.png",
  "https://cdn.uviewui.com/uview/swiper/swiper3.png",
]);

const list = ref([
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，最具性价比",
    src: "https://cdn.uviewui.com/uview/album/1.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，最具性价比",
    src: "https://cdn.uviewui.com/uview/album/2.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，",
    src: "https://cdn.uviewui.com/uview/album/3.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，最具性价比",
    src: "https://cdn.uviewui.com/uview/album/4.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，",
    src: "https://cdn.uviewui.com/uview/album/5.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，",
    src: "https://cdn.uviewui.com/uview/album/6.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，最具性价比",
    src: "https://cdn.uviewui.com/uview/album/7.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，最价比",
    src: "https://cdn.uviewui.com/uview/album/8.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，最具性价比",
    src: "https://cdn.uviewui.com/uview/album/9.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，",
    src: "https://cdn.uviewui.com/uview/album/10.jpg",
  },
]);

for (let i = 0; i < 14; i++) {
  list.push({
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，最具性价比",
    src: "https://cdn.uviewui.com/uview/album/1.jpg",
  });
}

//methods
</script>
<template>
  <div class="index-container">
    <up-swiper height="200" class="swiper" :list="swiper"></up-swiper>
    <div class="index-prod-title">全部商品</div>
    <CustList :list="list">
      <div>商品名称</div>
      <div>998</div>
    </CustList>
  </div>
</template>
<style scope lang="scss">
@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-content: center;
  @content;
}

.index-container {
  background-color: #f5f5f5;
  color: #444444;

  .index-prod-title {
    width: inherit;
    padding: 15rpx 0;
    padding-left: 15rpx;
    box-sizing: content-box;
    background-color: #fff;
  }
}
</style>